/**
 * 装车报表 -- 数据浏览
 */

import { message, Select } from "antd";
import { ViewBox } from "../../style";
import { ISelectList } from "../../../../VehicleFile/api";
import { FC, useCallback, useEffect, useState } from "react";
import { getDataOver, ILoadingReportType } from "../../api";

const DataOverView:FC<{
    options: ISelectList[]
}> = ({
    options
}) => {
    const [goodValue, setGoodValue] = useState('');
    const [objData, setObjData] = useState<ILoadingReportType>();
    const listFun = useCallback(async() => {
       const { code, msg, data } = (await getDataOver({good:goodValue})) as {
        code: number;
        msg: string;
        data: ILoadingReportType;
       }
        if (code === 20000) {
            setObjData(data);
        } else {
            message.error(msg);
        } 
    },[goodValue])

    useEffect(() => {
        listFun()
    },[listFun])

    return (
        <ViewBox>
            <div className="view-top">
                <div>数据概览</div>
                {options.length>0&&<Select
                    defaultValue={options[0].value}
                    style={{marginRight: '1rem', width: '10rem'}}
                    onChange={(value) => setGoodValue(value)}
                    options={options}>
                </Select>}
            </div>
            <ul className="view-main">
                <li>
                    <div className="li-top">
                        <span className="iconfont ri">&#xe629;</span>
                        <span>当日统计</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{objData?.jzWeightToday}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{objData?.carTotalToday}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div className="li-top">
                        <span className="iconfont zhou">&#xe62e;</span>
                        <span>当周统计</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{objData?.jzWeightWeek}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{objData?.carTotalWeek}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div className="li-top">
                        <span className="iconfont yue">&#xe62d;</span>
                        <span>当月统计</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{objData?.jzWeightMonth}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{objData?.carTotalMonth}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
            </ul>
        </ViewBox>
    )
}

export default DataOverView;